<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>打印二维码</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .button-div{
            height: 60px;
            width: 650px;
            margin: auto;
            text-align: center;
            line-height: 60px;
        }  .button-div{
               height: 60px;
               width: 650px;
               margin: auto;
               text-align: center;
               line-height: 60px;
           }
        .button-submit{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
        .return{
            border: 1.5px solid #bdbdbd;
            background-color: #fff;
            border-color: #e6e6e6;
            color: #666;
        }

        .gig-div{
            height: 100%;
            width: 500px;
            margin: auto;
        }
        .margin{
            width: 96%;
            height: 280px;
            margin: auto auto 20px auto;
            background-color: #ededee;
        }

        .note-div{
            height: 100%;
            width: 100%;
            background-color: #ededee;
        }
        .left-div{
            margin-left:10px;
            float:left;
            height: 280px;
            width: 90%;
            background-color: #ededee;
            text-align: left;
        }
        .left-div-div1{
            height: 20%;
            margin-top: 2px;
            width: 410px;
            font-weight: 600;
            font-size: 20px;
            word-wrap: break-word; /* 旧版浏览器支持 */
            overflow-wrap: break-word; /* 标准属性 */
        }
        .left-div-div12{
            height: 15%;
            font-weight: 550;
            font-size: 18px;
        }
        .left-div-div10{
            height: 20%;
            font-weight: 550;
            font-size: 30px;
            font-weight: bold;
        }
        .left-div-div100{
            height: 15%;
            font-weight: 400;
            font-size: 25px;
            font-weight: bold;
        }
        .print-page {
            page-break-before: always;  /* 在每个拣货单之前插入一个分页符 */
        }
    </style>
</head>
<body>
<div class="button-div">
    <button class="button-submit" type="button" onclick="printing()">&emsp;打印&emsp;</button>
    <button class="button-submit return" type="button" onclick="backupPage()">&emsp;关闭&emsp;</button>
</div>
<div class="gig-div"  id="printinghtml">
</div>
</body>
<script type="text/javascript" >
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    };

    var str = getUrlParam("ids") //解析出ids
    var htmlArray = [];  // 创建一个数组来保存每个拼接的HTML片段
    $.ajax({
        type: 'POST',
        data: { ids: str },
        url: "/hxBasicPositionGoods/btnGoodsPositionCode",
        async: false,
        dataType: "json",
        success: function (data) {
            if (data.data != null && data.data != '') {
                var arr = data.data;
                for (var i = 0; i < arr.length; i++) {
                    (function(i) {
                        var item = arr[i];
                        var htmls =
                            '<div class="print-page">' +
                            '<div class="margin" data-pick-id="' + item.positionNumber + '">' +
                            '<div class="note-div">' +
                            '<div class="left-div">' +
                            '<div class="left-div-div10"><span>库位编码：' + item.positionNumber +'</span></div>' +//库区//拣货位
                            '<div class="left-div-div1"><span>商品名称：' + item.goodsName + '</span></div>' + //备货口
                            '<div class="left-div-div10"><span>商品编码：' + item.goodsNumber + '</span></div>' +//托盘号
                            '<div class="left-div-div10">' +
                            '<img class="img1" src="/hxBasicPositionGoods/getDpsCode?id=' + item.goodsNumber.replace(/ /g, "") + '">' +
                            '</div>' +//订单号
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        i++;
                        htmlArray.push(htmls);
                    })(i);
                }
            }
        }
    });

    for (var j=htmlArray.length-1; j>=0; j--){
         if(j<0){
             continue;
         }
        $("#printinghtml").append(htmlArray[j]);
    }
    //返回按钮
    function backupPage(){
        var Index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(Index);
    }

    //打印按钮
    function printing(){
        bdhtml = window.document.body.innerHTML;
        phtnl = window.document.getElementById("printinghtml").innerHTML;
        window.document.body.innerHTML = phtnl; //把需要打印的指定内容赋给big
        window.print(); //调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML=bdhtml; // 最后还原页面
    }
</script>
</html>
